<!--
	作者：956911785@qq.com
	时间：2019年9月21日21:31:00
	描述：诗词大会顶部图片-上传
-->

<template>
	<Modal title="诗词大会顶部图片" v-model="modal0" width="500px">
		<div style="padding-top:10px;height: 250px;">
			<Form ref="params"  :label-width="150" label-position="right">		
				<div style="float:left;width:100%;">
					<FormItem label="图片上传说明:">
						<label>图片大小不能大于2M，宽高比例为：1:2.5为最佳</label>
					</FormItem>
				</div>
			
				<div style="width:100%;height: 100px;float:left;text-align: left;">
				    <FormItem label="诗词大会顶部图片">
					    <Upload
					        ref="upload1"
					        :show-upload-list="false"
					        :on-success="handleSuccess"
					        :format="['jpg','jpeg','png']"
					        :max-size="2048"
					        :on-format-error="handleFormatError"
					        :on-exceeded-size="handleMaxSize" 
					        type="drag"
					        :action="action"
					        style="display: inline-block;width:80px;">
					        <div style="width: 80px;height:80px;line-height: 80px;">
					            <Icon type="ios-camera" size="20"></Icon>
					        </div>
					    </Upload>
				    </FormItem>
				</div>

				<template v-if="imageurl1!=''">
					<div style="float:left;width:100%;padding-left:150px;">
						<div style="width: 120px;height:auto;margin-right:10px;float:left;">
							<div style="width: 120px;height:auto;float:left;">
								<img style="width:120px;height: auto;" :src="imageurl1" @click="handleView()">
							</div>
							<div style="text-align:center;float:left;width: 120px;">
								<Icon style="font-size: 20px;" type="ios-trash-outline" @click.native="handleRemove()"></Icon>
							</div>
						</div>
					</div>
				</template>		    
				
				<Modal title="图片预览" v-model="visible">
			        <img :src="imageurl1" v-if="visible" style="width: 100%">
			    </Modal>
		
			</Form>	
		</div>
		<div slot="footer">
			<Button type="text"  @click="closeModal()">取消</Button>
			<Button type="primary" @click="addsave()" >确定</Button>
		</div>	
     </Modal>
</template>

<script>

	import _config from "../../../../config/config"
	export default {
		name:"sifm",
		props: {
    	},
		data() {

			return {
	            modal0:false,
	            imageurl:'',
	            action:_config._ADMIN_SERVER+"/readbook/upload/filesUploadScdhImage.html",
	            visible: false,
				imageurl1:'',
			} 
		},
		methods: {
			
			
            getimageset(){
            	this.$http.get("/host/readbook/scdh/getPoetryPic.html")
				.then(datas => {
					this.imageurl=datas.PICURL;
					this.imageurl1=_config._ADMIN_SERVER+"/readbook/"+datas.PICURL;
				});	
           },
           
			
            closeModal(){
	      	    this.modal0 = false;
	      	    this.resetpar();
	        },
	        resetpar(){
	        	this.imageurl='';
	        },
	      
	    
	    	handleView () {
                this.visible = true;
            },
            handleRemove () {
              	this.imageurl='';
				this.imageurl1='';
            },
            handleSuccess(res, file) {
                this.imageurl=res[0].FILE_PATH;
				this.imageurl1=_config._ADMIN_SERVER+"/readbook/"+res[0].FILE_PATH;
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件上传失败',
                    desc: '文件' + file.name + '无法上传, 上传文件请选择jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '提示',
                    desc: '文件  ' + file.name + ' 太大, 上传的文件不能超过2M.'
                });
            },
            
            
            addsave:function(){	
				if(!this.imageurl){
					this.$Modal.error({
					    title: "提示",
					    content:"请上传图片!"
					});	
					return;
				}
				const params={
					imageurl:this.imageurl,
				}
				
				this.$http.post("/host/readbook/scdh/insertPoetryPic.html",params)
				.then(datas => {
					if(datas){
						this.$Modal.success({
                            title: "提示",
                            content: "保存成功"
                        });	
						this.closeModal();
					}else{
						this.$Modal.error({
                            title: "提示",
                            content:"保存失败"
                        });	
					}
				});
	        }, 

		},
		mounted() {
			
		},
		watch:{
			modal0(news,olds){
				if(news){
					this.getimageset();
				}
			}
			
		},
		computed: {
		
		}	
	}
</script>

<style scoped="scoped">
	
</style>



